<template>
  <div class="box">
    <div
      class="main"
      v-loading="loading"
      element-loading-text="正在创建中,请稍后"
    >
      <div class="content" v-if="isSuccess && !loading">
        <div>
          <img
            :src="require('../../../assets/success.png')"
            alt=""
            style="width: 130px; height: 110px"
          />
        </div>
        <div class="title" style="white-space: nowrap">
          成功创建借用凭证,60s返回首页
        </div>
        <div>
          <!-- <el-button type="primary" class="bth2">打印出库单</el-button> -->
        </div>
      </div>
      <div class="content" v-if="!isSuccess && !loading">
        <div>
          <img
            :src="require('../../../assets/error.png')"
            alt=""
            style="width: 130px; height: 110px"
          />
        </div>
        <div class="title2" style="white-space: nowrap">
          创建借用凭证失败,60s返回第三步
        </div>
        <div style="font-size: 20px">错误信息:{{ message }}</div>
        <div>
          <el-button type="primary" class="bth2" @click="toThree"
            >返回第三步</el-button
          >
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { repairAdd, clearShopCart } from "@/common/api";
export default {
  name: "BorrowResult",
  props: {},
  components: {},
  data() {
    return {
      loading: false,
      isSuccess: false,
      message: "",
    };
  },
  computed: {},
  watch: {},
  created() {},
  methods: {
    excute(obj) {
      this.loading = true;
      repairAdd(obj).then((res) => {
        this.loading = false;
        if (res.success) {
          this.isSuccess = true;
          this.clearShopCart();
        } else {
          this.isSuccess = false;
          this.message = res.message;
        }
      });
    },
    clearShopCart() {
      clearShopCart().then((res) => {});
    },
    toThree() {
      this.$emit("goStep", 2);
    },
  },
};
</script>


<style lang="scss" scoped>
.box {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  .main {
    width: 300px;
    height: 300px;
    .content {
      width: 100%;
      height: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 30px;
      .title {
        color: #009191;
        font-size: 24px;
      }
      .title2 {
        color: red;
        font-size: 24px;
      }
    }
  }
}
:deep .main .el-loading-text {
  color: #009191;
  font-size: 24px;
}
:deep .main .circular {
  width: 60px;
  height: 60px;
  .path {
    stroke: #009191;
  }
}
.bth2 {
  color: white;
  background-color: #009191;
  font-size: 22px;
  width: 150px;
  height: 50px;
}
</style>
